<template>
  <div class="wrap" v-loading="isSearchLoading">
    <!-- 搜索商品{{ $route.query }} -->
    <!-- 排序 -->
    <div class="header">
      <div class="line"></div>
      <div class="Commodity">
        <a @click="commodity = 1">综合排序</a>
        <!-- <a :class="commodity == 1 && 'sel'" @click="commodity = 1">综合排序</a> -->
        <!-- <a :class="commodity == 2 && 'sel'" @click="commodity = 2">销量</a>
        <a :class="commodity == 3 && 'sel'" @click="commodity = 3">信用</a>
        <a :class="commodity == 4 && 'sel'" @click="commodity = 4">
          <span style="margin-right: 2em">价格</span>
          <input
            :min="0"
            placeholder="￥"
            type="number"
            @change="invalidatePrice('minPrice', $event)"
          /><span><label>—</label></span
          ><input
            id=""
            :min="0"
            name=""
            placeholder="￥"
            type="number"
            @change="invalidatePrice('maxPrice', $event)"
          />
        </a> -->
      </div>
    </div>
    <!-- 内容list -->
    <div
      class="goodsList"
      v-if="goodsList && goodsList.length > 0"
      @scroll="scrollTop"
    >
      <div
        v-for="item in goodsList"
        class="content"
        @click="goDetail(item)"
        :key="item.id"
      >
        <img :src="item.thumb" alt="" height="219px" width="232px" />
        <p>{{ item.name }}</p>
        <p>¥{{ item.priceCurrent / 100 }}/{{ item.unit }}</p>
        <p class="goodsP">
          <span
            ><img
              :src="item.cart || '/images/111.png'"
              alt=""
              height="18px"
              width="18px"
          /></span>
          <span>{{ item.mallName }}</span>
        </p>
      </div>
      <div
        v-for="(item, index) in 5 - (goodsList.length % 5)"
        style="width: 232px"
        :key="index"
      ></div>
    </div>

    <div class="wrap" v-else-if="!loading">
      <div class="bomContent">
        <img
          alt=""
          height="330px"
          src="../../../../public/images/74.png"
          srcset=""
          width="330px"
        />
        <p>暂时没有搜索到你要的商品</p>
      </div>
    </div>
  </div>
</template>

<script>
import { backstagePageList } from "@/api/mallApi/congLinMall";

export default {
  name: "mallProjectSearchGoods", //搜索商品

  data() {
    return {
      commodity: 1,
      minPrice: "",
      maxPrice: "",
      loading: true,
      goodsList: [
        // {
        //   id: 1,
        //   img: require("../../../../public/images/51.png"),
        //   title: "家用锂电钻工具套装",
        //   price: 199.0,
        //   quantity: "套",
        //   cart: require("../../../../public/images/9.png"),
        //   shop: "五金专营店",
        // },
        // {
        //   id: 2,
        //   img: require("../../../../public/images/52.png"),
        //   title: "威克士12V无刷手电钻",
        //   price: 239.0,
        //   quantity: "套",
        //   cart: require("../../../../public/images/9.png"),
        //   shop: "五金专营店",
        // },
        // {
        //   id: 3,
        //   img: require("../../../../public/images/53.png"),
        //   title: "威克士12V无刷手电钻",
        //   price: 299.0,
        //   quantity: "套",
        //   cart: require("../../../../public/images/9.png"),
        //   shop: "五金专营店",
        // },
        // {
        //   id: 4,
        //   img: require("../../../../public/images/54.png"),
        //   title: "威克士12V无刷手电钻",
        //   price: 2363.09,
        //   quantity: "套",
        //   cart: require("../../../../public/images/9.png"),
        //   shop: "五金专营店",
        // },
        // {
        //   id: 5,
        //   img: require("../../../../public/images/55.png"),
        //   title: "家用锂电钻工具套装",
        //   price: 199.0,
        //   quantity: "套",
        //   cart: require("../../../../public/images/9.png"),
        //   shop: "五金专营店",
        // },
        // {
        //   id: 6,
        //   img: require("../../../../public/images/56.png"),
        //   title: "威克士12V无刷手电钻",
        //   price: 239.0,
        //   quantity: "套",
        //   cart: require("../../../../public/images/9.png"),
        //   shop: "五金专营店",
        // },
        // {
        //   id: 7,
        //   img: require("../../../../public/images/57.png"),
        //   title: "威克士12V无刷手电钻",
        //   price: 299.0,
        //   quantity: "套",
        //   cart: require("../../../../public/images/9.png"),
        //   shop: "五金专营店",
        // },
        // {
        //   id: 8,
        //   img: require("../../../../public/images/58.png"),
        //   title: "威克士12V无刷手电钻",
        //   price: 2363.09,
        //   quantity: "套",
        //   cart: require("../../../../public/images/9.png"),
        //   shop: "五金专营店",
        // },
        // {
        //   id: 9,
        //   img: require("../../../../public/images/51.png"),
        //   title: "家用锂电钻工具套装",
        //   price: 199.0,
        //   quantity: "套",
        //   cart: require("../../../../public/images/9.png"),
        //   shop: "五金专营店",
        // },
        // {
        //   id: 10,
        //   img: require("../../../../public/images/52.png"),
        //   title: "威克士12V无刷手电钻",
        //   price: 239.0,
        //   quantity: "套",
        //   cart: require("../../../../public/images/9.png"),
        //   shop: "五金专营店",
        // },
        // {
        //   id: 11,
        //   img: require("../../../../public/images/53.png"),
        //   title: "威克士12V无刷手电钻",
        //   price: 299.0,
        //   quantity: "套",
        //   cart: require("../../../../public/images/9.png"),
        //   shop: "五金专营店",
        // },
        // {
        //   id: 12,
        //   img: require("../../../../public/images/54.png"),
        //   title: "威克士12V无刷手电钻",
        //   price: 2363.09,
        //   quantity: "套",
        //   cart: require("../../../../public/images/9.png"),
        //   shop: "五金专营店",
        // },
        // {
        //   id: 13,
        //   img: require("../../../../public/images/55.png"),
        //   title: "家用锂电钻工具套装",
        //   price: 199.0,
        //   quantity: "套",
        //   cart: require("../../../../public/images/9.png"),
        //   shop: "五金专营店",
        // },
        // {
        //   id: 14,
        //   img: require("../../../../public/images/56.png"),
        //   title: "威克士12V无刷手电钻",
        //   price: 239.0,
        //   quantity: "套",
        //   cart: require("../../../../public/images/9.png"),
        //   shop: "五金专营店",
        // },
        // {
        //   id: 15,
        //   img: require("../../../../public/images/57.png"),
        //   title: "威克士12V无刷手电钻",
        //   price: 299.0,
        //   quantity: "套",
        //   cart: require("../../../../public/images/9.png"),
        //   shop: "五金专营店",
        // },
        // {
        //   id: 16,
        //   img: require("../../../../public/images/58.png"),
        //   title: "威克士12V无刷手电钻",
        //   price: 2363.09,
        //   quantity: "套",
        //   cart: require("../../../../public/images/9.png"),
        //   shop: "五金专营店",
        // },
        // {
        //   id: 17,
        //   img: require("../../../../public/images/51.png"),
        //   title: "家用锂电钻工具套装",
        //   price: 199.0,
        //   quantity: "套",
        //   cart: require("../../../../public/images/9.png"),
        //   shop: "五金专营店",
        // },
        // {
        //   id: 18,
        //   img: require("../../../../public/images/52.png"),
        //   title: "威克士12V无刷手电钻",
        //   price: 239.0,
        //   quantity: "套",
        //   cart: require("../../../../public/images/9.png"),
        //   shop: "五金专营店",
        // },
        // {
        //   id: 19,
        //   img: require("../../../../public/images/53.png"),
        //   title: "威克士12V无刷手电钻",
        //   price: 299.0,
        //   quantity: "套",
        //   cart: require("../../../../public/images/9.png"),
        //   shop: "五金专营店",
        // },
        // {
        //   id: 20,
        //   img: require("../../../../public/images/54.png"),
        //   title: "威克士12V无刷手电钻",
        //   price: 2363.09,
        //   quantity: "套",
        //   cart: require("../../../../public/images/9.png"),
        //   shop: "五金专营店",
        // },
        // {
        //   id: 21,
        //   img: require("../../../../public/images/55.png"),
        //   title: "家用锂电钻工具套装",
        //   price: 199.0,
        //   quantity: "套",
        //   cart: require("../../../../public/images/9.png"),
        //   shop: "五金专营店",
        // },
        // {
        //   id: 22,
        //   img: require("../../../../public/images/56.png"),
        //   title: "威克士12V无刷手电钻",
        //   price: 239.0,
        //   quantity: "套",
        //   cart: require("../../../../public/images/9.png"),
        //   shop: "五金专营店",
        // },
        // {
        //   id: 23,
        //   img: require("../../../../public/images/57.png"),
        //   title: "威克士12V无刷手电钻",
        //   price: 299.0,
        //   quantity: "套",
        //   cart: require("../../../../public/images/9.png"),
        //   shop: "五金专营店",
        // },
        // {
        //   id: 24,
        //   img: require("../../../../public/images/58.png"),
        //   title: "威克士12V无刷手电钻",
        //   price: 2363.09,
        //   quantity: "套",
        //   cart: require("../../../../public/images/9.png"),
        //   shop: "五金专营店",
        // },
        // {
        //   id: 25,
        //   img: require("../../../../public/images/51.png"),
        //   title: "家用锂电钻工具套装",
        //   price: 199.0,
        //   quantity: "套",
        //   cart: require("../../../../public/images/9.png"),
        //   shop: "五金专营店",
        // },
        // {
        //   id: 26,
        //   img: require("../../../../public/images/52.png"),
        //   title: "威克士12V无刷手电钻",
        //   price: 239.0,
        //   quantity: "套",
        //   cart: require("../../../../public/images/9.png"),
        //   shop: "五金专营店",
        // },
        // {
        //   id: 27,
        //   img: require("../../../../public/images/53.png"),
        //   title: "威克士12V无刷手电钻",
        //   price: 299.0,
        //   quantity: "套",
        //   cart: require("../../../../public/images/9.png"),
        //   shop: "五金专营店",
        // },
        // {
        //   id: 28,
        //   img: require("../../../../public/images/54.png"),
        //   title: "威克士12V无刷手电钻",
        //   price: 2363.09,
        //   quantity: "套",
        //   cart: require("../../../../public/images/9.png"),
        //   shop: "五金专营店",
        // },
        // {
        //   id: 29,
        //   img: require("../../../../public/images/55.png"),
        //   title: "家用锂电钻工具套装",
        //   price: 199.0,
        //   quantity: "套",
        //   cart: require("../../../../public/images/9.png"),
        //   shop: "五金专营店",
        // },
        // {
        //   id: 30,
        //   img: require("../../../../public/images/56.png"),
        //   title: "威克士12V无刷手电钻",
        //   price: 239.0,
        //   quantity: "套",
        //   cart: require("../../../../public/images/9.png"),
        //   shop: "五金专营店",
        // },
        // {
        //   id: 31,
        //   img: require("../../../../public/images/57.png"),
        //   title: "威克士12V无刷手电钻",
        //   price: 299.0,
        //   quantity: "套",
        //   cart: require("../../../../public/images/9.png"),
        //   shop: "五金专营店",
        // },
        // {
        //   id: 32,
        //   img: require("../../../../public/images/58.png"),
        //   title: "威克士12V无刷手电钻",
        //   price: 2363.09,
        //   quantity: "套",
        //   cart: require("../../../../public/images/9.png"),
        //   shop: "五金专营店",
        // },
        // {
        //   id: 32,
        //   img: require("../../../../public/images/58.png"),
        //   title: "威克士12V无刷手电钻",
        //   price: 2363.09,
        //   quantity: "套",
        //   cart: require("../../../../public/images/9.png"),
        //   shop: "五金专营店",
        // }
      ],
      perPage: 10, // 每次加载的项目数量
      currentPage: 1, // 当前页码
      visibleGoodsList: [],
      pageSize: 20,
      pageNum: 1,
      isSearchLoading: false,
    };
  },

  beforeDestroy() {
    this.$bus.$off("searchGoods");
  },

  mounted() {
    this.getSearchGoods();
    this.$bus.$on("searchGoods", (data) => {
      this.getSearch(data);
    });
    // this.loadMoreGoods()
    window.addEventListener("scroll", this.handleScroll);
  },

  methods: {
    getSearch(data) {
      // 点击搜索跳转页面后再次点击搜索
      this.$route.query.id = "";
      this.$route.query.categoryId = "";
      this.isSearchLoading = true;
      let inpurValue = {
        categoryId:
          this.$route.query.type == "first" ? "" : this.$route.query.id, // 二级分类
        parentCategoryId:
          this.$route.query.type == "first" ? this.$route.query.categoryId : "", //一级分类
        name: data,
        status: 2,
        isDelete: 0,
        ptStatus: 2,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        isPage: 1,
        type: "user",
      };
      backstagePageList(inpurValue).then((res) => {
        this.isSearchLoading = false;
        this.goodsList = res.data.list;
      });
    },
    getSearchGoods() {
      this.isSearchLoading = true;
      this.loading = true;
      let inpurValue = {
        categoryId:
          this.$route.query.type == "first" ? "" : this.$route.query.id, // 二级分类
        parentCategoryId:
          this.$route.query.type == "first" ? this.$route.query.categoryId : "", //一级分类
        name: this.$route.query.searchKey,
        status: 2,
        isDelete: 0,
        ptStatus: 2,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        isPage: 1,
        type: "user",
      };
      backstagePageList(inpurValue).then((res) => {
        this.isSearchLoading = false;
        // console.log(res);
        this.goodsList = res.data.list;
        this.loading = false;
        // console.log(this.goodsList);
      });
    },
    goDetail(query) {
      console.log(query.id);
      this.$router.push({
        path: "/mall/product",
        query,
      });
    },
    handleScroll() {
      const scrollY = window.scrollY;
      const windowHeight = window.innerHeight;
      const documentHeight = document.documentElement.scrollHeight;
      const bottomOfPage = windowHeight + scrollY + 370 >= documentHeight;
      // if (bottomOfPage) {
      //   this.loadMoreGoods();
      // }
      if (
        bottomOfPage &&
        this.visibleGoodsList.length < this.goodsList.length
      ) {
        // setTimeout(() => {

        // }, 1000);
        this.loadMoreGoods();
      }
    },
    loadMoreGoods() {
      const start = (this.currentPage - 1) * this.perPage;
      const end = start + this.perPage;
      this.visibleGoodsList = [
        ...this.visibleGoodsList,
        ...this.goodsList.slice(start, end),
      ];
      this.currentPage++;
      console.log(this.visibleGoodsList);
    },

    async invalidatePrice(mm, evt) {
      this[mm] = evt.target.value;
      if (
        this.minPrice >= 0 &&
        this.maxPrice > 0 &&
        this.maxPrice > this.minPrice
      ) {
        await this.searchByPrice(this.minPrice, this.maxPrice);
      }
    },

    async searchByPrice(min, max) {
      console.log("searchByPrice");
    },
    scrollTop() {},
  },
};
</script>

<style lang="scss" scoped>
.wrap {
  .bomContent {
    width: 330px;
    height: 530px;
    margin: 0 auto;

    p {
      margin-left: 120px;
    }
  }

  .goodsList {
    // background-color: rgb(255, 254, 254);
    width: 100%;
    // height: 1100px;
    margin-bottom: 30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    // overflow: hidden;
    .goodsP span:nth-child(2) {
      font-family: "Source Han Sans CN";
      font-weight: 400;
      font-size: 15px;
      color: #626262;
      margin-left: 10px;
    }
    span img {
      border-radius: 100%;
      //  clip-path: circle(50%);
      //  background: #1289FF;
    }
    .content {
      width: 232px;
      height: 354px;
      margin-top: 15px;
      //   border: 1px solid ;
      box-shadow: 1px 1px 1px 1px #fbfafa;
      //   background-color: #0479db;
      p:nth-child(2) {
        // font-family: "Source Han Sans CN Medium";
        font-weight: 700;
        font-size: 15px;
        color: #2b2b2b;
        overflow: hidden;
        /* 隐藏超出容器大小的部分 */
        white-space: nowrap;
        /* 不换行 */
        text-overflow: ellipsis;
        /* 显示省略号 */
        // background-color: aquamarine;
      }

      p:nth-child(3) {
        font-family: "Source Han Sans CN Bold";
        font-weight: 700;
        font-size: 20px;
        color: #ff6b00;
      }
    }
  }

  .header {
    background: #f8f8f8;

    .line {
      width: 100%;
      height: 1px;
      background: #0479db;
    }

    .sel {
      background: white;
      color: orange;
      font-weight: bold;
    }

    .Commodity {
      display: flex;
      line-height: 2em;

      input {
        margin: 0 0.5em;
        border: solid 1px lightgray;
        padding: 6px 12px;
      }

      label {
        color: black !important;
      }

      a {
        padding: 1em 1em;
        min-width: 105px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        box-sizing: border-box;

        &:first-child {
          margin-left: 0 !important;
        }
      }
    }
  }
}
</style>
